<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>发布广告</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
	<!-- 视口标签，禁止用户在移动端随意拉动 -->
	<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
	<title>detail</title>
	<link rel="stylesheet" href="../lib/bootstrap/css/bootstrap.css">
	<link rel="stylesheet" href="../lib/button/buttons.css">

	<link rel="stylesheet" href="../lib/bootstrapvalidator/dist/css/bootstrapValidator.min.css">

	<link rel="stylesheet" href="../css/common.css">
	<style>
		/*设置输入框组的样式*/
	/*#payTime {
		margin-left: 15px;


	}*/
	/*#payTime + span {
		padding-left: 25px;

	}*/

 

	.extralink {
		display: inline-block;

		margin: 8px 0 0 14px;
	}

	.content-box {
		background: linear-gradient(to right, #FFEEEE,#DDEFBB);

	}

	#sellamount {
		display: none;
	}

	
</style>
</head>
<body>
	<header id="header"></header>
	<section>
		<div class="container content-box">
			<div class="row">
				<div class="col-md-8 col-md-offset-2 release-box">
					<div class="page-header">
						<h2 class="page-title">发布广告</h2>
					</div>


					<!-- 发布表单面板 -->
					<div class="panel panel-primary">
						<div class="panel-body">
							<form id="releaseForm" method="post" class="form-horizontal" action="ajaxSubmit.php">
								<div class="form-group form-item">
									<label class="col-md-2 control-label">我想要</label>
									<div class="col-md-6">
										<label class="radio-inline">
											<input type="radio" name="tradeType" id="typeBuy" value="buy" checked=""> 在线购买
										</label>
										<label class="radio-inline">
											<input type="radio" name="tradeType" id="typeSell" value="sell"> 在线出售
										</label>
									</div>
								</div>

								<div class="form-group form-item">
									<label class="col-md-2 control-label" for="price">担保价格</label>
									<div class="col-md-6">
										<input id="price" name="price" class="form-control" type="text" placeholder="请输入担保价格" autocomplete="off" value="0.00027" maxlength="7" />
										<span class="text-danger" id="price-tips">当前最低卖价：0.00027 CNY</span>
									</div>
								</div>

								<div class="form-group form-item">
									<label class="col-md-2 control-label" for="amount">担保份数</label>
									<div class="col-md-6">
										<input id="amount" name="amount" class="form-control" type="text" placeholder="请输入担保份数，必须是整数" autocomplete="off" maxlength="9" />
										 
										<!--  <input id="sellamount" name="sellamount" class="form-control" type="text" placeholder="请输入担保份数，必须是整数" autocomplete="off" maxlength="9" /> -->

									</div>
									<span class="extralink"><a href="/user/recharge">去充值积分</a></span>

								</div>

								<div class="form-group form-item">
									<label class="col-md-2 control-label">总金额</label>
									<div class="col-md-6">
										<input class="form-control" id="totalPrice" type="text" value="0" disabled>


									</div>
								</div>


								<div class="form-group form-item">
									<label class="col-md-2 control-label" for="payTime">付款期限</label>
									<div class="col-md-5">
										<div class="input-group">
											<input id="payTime" name="payTime" class="form-control"type="text" value="" placeholder="10-90之间的整数" autocomplete="off" />
											<span class="input-group-addon">分钟内</span>
										</div>
									</div>
									
								</div>


						


                <div class="form-group form-item">
                	<label class="col-md-2 control-label">付款方式</label>
                	<div class="col-md-6">
                		<label class="checkbox-inline">
                			<input type="checkbox" name="payType" id="ali-pay" value="1"> 支付宝
                		</label>
                		<label class="checkbox-inline">
                			<input type="checkbox" name="payType" id="asd" value="2"> 微信支付
                		</label>
                	</div>
                </div>

                <div class="form-group">
                	<label class="col-md-2 control-label" for="trade-password">资金密码</label>
                	<div class="col-md-6">
                		<input id="payPassword" name="payPassword" class="form-control" type="password" placeholder="请输入资金密码" autocomplete="off">
                	</div>
                	<span class="extralink"><a href="/user/updatePayPassword">去设置资金密码</a></span>
                </div>




                <div class="col-md-7 col-md-offset-2">
                	<button id="createAdvertButton" type="button" class="button button-glow button-border button-rounded button-primary btn-block">立即发布</button>
                </div>

                <!-- btn btn-info -->

            </form>
        </div>
    </div>
</div>
</div>





</div>





</section>
<footer id="footer"></footer>
<!-- 底部内容end -->
<script src="../lib/jquery/jquery-2.1.1.js"></script>
<script src="../lib/bootstrap/js/bootstrap.min.js"></script>
<script src="../lib/bootstrapvalidator/dist/js/bootstrapValidator.min.js"></script>

<script type="text/javascript">
	$(function () {
             // 加载公共html模板
    $('#header').load('../common/nav.html');
    $('#footer').load('../common/footer.html');

    $('#createAdvertButton').on("click", () => $('#releaseForm').bootstrapValidator('validate'));

   
    // 计算总金额
    function countPrice () {
    	 var amount = $("#amount").val() * 1;
        var price = $("#price").val() * 1;
         

         if (isNaN(amount) || isNaN(price)) {
         	$("#totalPrice").val(0);
         	return false;
         }


        $("#totalPrice").val((price * amount).toFixed(2));

    }
    $("#amount").on("keyup", countPrice);
	$("#price").on("keyup", countPrice);
    
   
    // 广告类型改变时
    function changeType(){
    	var tradeType = $('input:radio:checked').val();
        //当类型为卖出的时候发送一个ajax请求 
    	if (tradeType == 'sell') {}
    	// 	$('#sellamount').css('display','none');
    	// 	$('#amount').css('display','block');

    	// }
    	// if (tradeType == 'sell') {
    	// 	$('#amount').css('display','none');
    	// 	$('#sellamount').css('display','block');
    	// }
    	
    	//清空表单和校验样式
            // $('#releaseForm').data('bootstrapValidator').resetForm(true);
		// var tradeType = $('input:radio:checked').val();
		// if(tradeType==1){
		// 	document.getElementById("price").value='0.00025';
		// 	$("#price-tips").text("当前最低卖价：0.00025 CNY");
  //           $("#amount-tips").text("");
  //       }else{
		// 	document.getElementById("price").value='0.00024';
		// 	$("#price-tips").text("当前最高买价：0.00024 CNY");
  //       }
	}

	$('#typeBuy').on('change',changeType);
	$('#typeSell').on('change',changeType);





        //发布广告的表单校验规则，ajax 提交请看这里(～￣▽￣)～
        $('#releaseForm').bootstrapValidator({
        	message: '这个值是假的兄弟！',
        	feedbackIcons: {
        		valid: 'glyphicon glyphicon-ok',
        		invalid: 'glyphicon glyphicon-remove',
        		validating: 'glyphicon glyphicon-refresh'
        	},
        	fields: {
        		price: {
        			message: '输入值无效',
        			validators: {
        				notEmpty: {
        					message: '担保价格不能为空！'
        				},
        				regexp: {/* 包含正则表达式，和提示 */
        					regexp: /^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$/,
        					message: '请输入正确的价格！'


        				}
        			}
        		},
        		amount: {
        			message: '输入值无效',
        			
        			validators: {
        				notEmpty: {
        					message: '担保数量不能为空！'
        				},

        				regexp: {/* 包含正则表达式，和提示 */
        					regexp: /^[1-9]\d*$/,
        					message: '请输入正确的数量！'


        				},
        				
        				callback: {
        					message: '最低交易数量为10000！',
        					callback:function(value, validator,$field){
        						var buyCount = 10000;
        						if(value * 1 < buyCount){
        							

        							return false;
        						}
        						return true;

        					}
        				}
                   
        			}
        		},
        		
        		payTime: {
        			validators: {
        				message: '输入值无效',
        				notEmpty: {
        					message: '付款期限不能为空！'
        				},
        				regexp: {/* 包含正则表达式，和提示 */
        					regexp: /^[1-9]\d*$/,
        					message: '请输入正确的时间！'



        				},
        				callback: {
        					message: '请输入正确的时间！',
        					callback:function(value, validator,$field){
        						var buyTime = 90;
        						if(value * 1 > buyTime){
        							
        							return false;
        						}
        						return true;

        					}
        				}
             //   callback: {/*自定义，可以在这里与其他输入项联动校验*/
             //     message: '只能是wm5920',
             //     callback:function(value, validator,$field){
             //         return value==='wm5920';
             //     }
             // }
         }

     },
     payType: {
     	validators: {
     		notEmpty: {
     			message: '请选择至少一种付款方式！'
     		}
     	}
     },
     payPassword : {
     	validators: {
     		notEmpty: {
     			message: '请填写资金密码！'
     		}
     	}
     }

 }
        }).on('success.form.bv', function (e) {//这是当表单检验成功通过时的事件
            // Prevent form submission
            //阻止表单再次提交
            e.preventDefault();

            console.log("ok");
            //在这里做你想做的事情！！！！！！！

            //表单提交成功后，请清空表单内容
            // Get the form instance获取表单的的对象
            // var $form = $(e.target);

            // // Get the BootstrapValidator instance
            // var bv = $form.data('bootstrapValidator');

            // Use Ajax to submit form data 这里提交到后台处理使用 ajax
            // $.post($form.attr('action'), $form.serialize(), function(result) {
            //      console.log(result);
            //  }, 'json');
        });

    })
</script>
</body>
</html>